@mixin flex-box() {
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

/* 允许折行 */
@mixin flex-box--wrap() {
    -webkit-flex-wrap: wrap;
    -webkit-box-lines: multiple;
    flex-wrap: wrap;
}

/*
    主轴对齐

    box-pack: start | end | center | justify;
    主轴对齐: 左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐

    justify-content: flex-start | flex-end | center | space-between | space-around
    主轴对齐方式: 左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布(兼容不可用)
*/
@mixin flex-box--x($value: start) {
    $compat: $value;
    @if $value == start {
        $compat: flex-#{$value};
    }
    @else if $value == end {
        $compat: flex-#{$value};
    }
    @else if $value == justify {
        $compat: space-between;
    }
    -webkit-box-pack: $value;
    -moz-justify-content: $compat;
    -webkit-justify-content: $compat;
    justify-content: $compat;
}

/*
   交叉轴对齐

   box-align: start | end | center | baseline | stretch
   交叉轴对齐: 顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满

   align-items: flex-start | flex-end | center | baseline | stretch;
   交叉轴对齐方式: 顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐
*/
@mixin flex-box--y($value: start) {
    $compat: $value;
    @if $value == start {
        $compat: flex-#{$value};
    }
    @else if $value == end {
        $compat: flex-#{$value};
    }
    -webkit-box-align: $value;
    -moz-align-items: $compat;
    -webkit-align-items: $compat;
    align-items: $compat;
}

/*
    子元素的显示方向

    top: 从上到下
    right: 从右到左
    bottom: 从下到上
    left: 从左到右
*/
@mixin flex-box--dir ($value: top) {
    @if $value == top {
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    @else if $value == right {
        -webkit-box-pack: end;
        -webkit-box-direction: reverse;
        -webkit-box-orient: horizontal;
        -moz-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
    @else if $value == bottom {
        -webkit-box-pack: end;
        -webkit-box-direction: reverse;
        -webkit-box-orient: vertical;
        -moz-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    @else if $value == left {
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }
}

/* 子元素伸缩 */
@mixin flex-item ($value: 1) {
    -webkit-box-flex: $value;
    -moz-box-flex: $value;
    -webkit-flex: $value;
    -ms-flex: $value;
    flex: $value;
}

/* 子元素排序 */
@mixin flex-item--order ($value) {
    -webkit-box-ordinal-group: $value;
    -moz-box-ordinal-group: $value;
    box-ordinal-group: $value;
    -ms-flex-order: $value;
    flex-order: $value;
    -webkit-order: $value;
    order: $value;
}